<div id="tabContainer" class="n-sb-tab-container">
    <div id="tabSettings2" class="n-sb-tab n-sb-active">Explore</div>
    <div id="tabCustomize2" class="n-sb-tab" onclick="assets_downloader.loadLibrary();">My Library</div>
</div>
<div id="t1" class="n-sb-active">
    <div id="assets_downloader_header">
        <div class="h-header" id="h_search" data-content="panel_head_home">
            <!-- Search Input -->
            <div class="search-row">
                <input type="text" id="searchTemplateInput" class="n-sb-searchmodels"
                    oninput="assets_downloader.searchT()" placeholder="Search..." autocomplete="off" class="">
            </div>

            <div class="filters-row">
                <!-- NSFW Filter -->
                <select id="nsfwFilter" onchange="assets_downloader.searchT()">
                    <option value="true">NSFW</option>
                    <option value="false" selected>SFW</option>
                </select>

                <!-- Type Filter -->
                <select id="typeFilter" data-placeholder="Type(s)" multiple data-multi-select>
                    <option value="Checkpoint">Checkpoint</option>
                    <option value="TextualInversion">TextualInversion</option>
                    <option value="Hypernetwork">Hypernetwork</option>
                    <option value="AestheticGradient">AestheticGradient</option>
                    <option value="LORA">LORA</option>
                    <option value="LoCon">LoCon</option>
                    <option value="DoRA">DoRA</option>
                    <option value="Controlnet">Controlnet</option>
                    <option value="Upscaler">Upscaler</option>
                    <option value="MotionModule">MotionModule</option>
                    <option value="VAE">VAE</option>
                    <option value="Poses">Poses</option>
                    <option value="Wildcards">Wildcards</option>
                    <option value="Workflows">Workflows</option>
                    <option value="Other">Other</option>
                </select>
                    <select id="baseModelFilter" data-placeholder="Base Model(s)" multiple data-multi-select>
                        <option value="AuraFlow">AuraFlow</option>
                        <option value="CogVideoX">CogVideoX</option>
                        <option value="Flux.1 D">Flux.1 D</option>
                        <option value="Flux.1 S">Flux.1 S</option>
                        <option value="HiDream">HiDream</option>
                        <option value="Hunyuan 1">Hunyuan 1</option>
                        <option value="Hunyuan Video">Hunyuan Video</option>
                        <option value="Illustrious">Illustrious</option>
                        <option value="Kolors">Kolors</option>
                        <option value="LTXV">LTXV</option>
                        <option value="Lumina">Lumina</option>
                        <option value="Mochi">Mochi</option>
                        <option value="NoobAI">NoobAI</option>
                        <option value="ODOR">ODOR</option>
                        <option value="OpenAI">OpenAI</option>
                        <option value="Other">Other</option>
                        <option value="PixArt a">PixArt a</option>
                        <option value="PixArt E">PixArt E</option>
                        <option value="Playground v2">Playground v2</option>
                        <option value="Pony">Pony</option>
                        <option value="SD 1.4">SD 1.4</option>
                        <option value="SD 1.5">SD 1.5</option>
                        <option value="SD 1.5 Hyper">SD 1.5 Hyper</option>
                        <option value="SD 1.5 LCM">SD 1.5 LCM</option>
                        <option value="SD 2.0">SD 2.0</option>
                        <option value="SD 2.0 768">SD 2.0 768</option>
                        <option value="SD 2.1">SD 2.1</option>
                        <option value="SD 2.1 768">SD 2.1 768</option>
                        <option value="SD 2.1 Unclip">SD 2.1 Unclip</option>
                        <option value="SD 3">SD 3</option>
                        <option value="SD 3.5">SD 3.5</option>
                        <option value="SD 3.5 Large">SD 3.5 Large</option>
                        <option value="SD 3.5 Large Turbo">SD 3.5 Large Turbo</option>
                        <option value="SD 3.5 Medium">SD 3.5 Medium</option>
                        <option value="SDXL 0.9">SDXL 0.9</option>
                        <option value="SDXL 1.0">SDXL 1.0</option>
                        <option value="SDXL 1.0 LCM">SDXL 1.0 LCM</option>
                        <option value="SDXL Distilled">SDXL Distilled</option>
                        <option value="SDXL Hyper">SDXL Hyper</option>
                        <option value="SDXL Lightning">SDXL Lightning</option>
                        <option value="SDXL Turbo">SDXL Turbo</option>
                        <option value="SVD">SVD</option>
                        <option value="SVD XT">SVD XT</option>
                        <option value="Stable Cascade">Stable Cascade</option>
                        <option value="Wan Video">Wan Video</option>
                        <option value="Wan Video 1.3B t2v">Wan Video 1.3B t2v</option>
                        <option value="Wan Video 14B i2v 480p">Wan Video 14B i2v 480p</option>
                        <option value="Wan Video 14B i2v 720p">Wan Video 14B i2v 720p</option>
                        <option value="Wan Video 14B t2v">Wan Video 14B t2v</option>
                    </select>

          

                <!-- Sort Option -->
                <select id="sortOption" onchange="assets_downloader.searchT()">
                    <option value="">Sort By</option>
                    <option value="Highest Rated">Rates</option>
                    <option value="Most Downloaded">Downloads</option>
                    <option value="Newest">Newest</option>
                </select>

                <!-- Period Option -->
                <select id="periodOption" onchange="assets_downloader.searchT()">
                    <option value="">All Time</option>
                    <option value="Year">Year</option>
                    <option value="Month">Month</option>
                    <option value="Week">Week</option>
                    <option value="Day">Day</option>
                </select>
            </div>
        </div>
    </div>

    <div id="assets_downloader_main">
        <div class="result-container" id="results-container">
            <!-- Results will be injected here -->
        </div>
    </div>
</div>

<div id="t2">
    <div class="sb-mymodels">
        <div id="assets_downloader_header">
            <div class="h-header" id="h_search" data-content="panel_head_home">
                <!-- Search Input -->
                <div class="search-row">
                    <input type="text" id="searchLibraryInput" class="n-sb-searchmodels"
                        oninput="assets_downloader.searchInLibrary()" placeholder="Search..." autocomplete="off"
                        class="">
                    <div class="sb-kebab-menu">
                        <div class="sb-kebab-icon" onclick="toggleMenu()">⋮</div>
                        <ul id="sb-menu" class="sb-menu">
                            <li id="sb-rebuild" onclick="assets_downloader.rebuildLibrary(0)">Rebuild Library</li>
                            <li id="sb-rebuild" onclick="assets_downloader.rebuildLibrary(1)">Rebuild Library From Zero</li>
                        </ul>
                    </div>
                </div>
                <div class="search-row">
                    <div class="sb-rebuild-bg-pgs">
                        <label>Building library...</label>
                        <div class="sb-rebuild-pgs"></div>
                    </div>
                </div>
                <div class="filters-row">
                    <!-- NSFW Filter -->
                    <select id="nsfwFilterLibrary" onchange="assets_downloader.searchInLibrary()">
                        <option value="true">NSFW</option>
                        <option value="false" selected>SFW</option>
                    </select>

                    <!-- Type Filter -->
                    <select id="typeFilterLibrary" data-placeholder="Type(s)" multiple data-library-multi-select>
                        <option value="Checkpoint">Checkpoint</option>
                        <option value="TextualInversion">TextualInversion</option>
                        <option value="Hypernetwork">Hypernetwork</option>
                        <option value="AestheticGradient">AestheticGradient</option>
                        <option value="LORA">LORA</option>
                        <option value="LoCon">LoCon</option>
                        <option value="DoRA">DoRA</option>
                        <option value="Controlnet">Controlnet</option>
                        <option value="Upscaler">Upscaler</option>
                        <option value="MotionModule">MotionModule</option>
                        <option value="VAE">VAE</option>
                        <option value="Poses">Poses</option>
                        <option value="Wildcards">Wildcards</option>
                        <option value="Workflows">Workflows</option>
                        <option value="Other">Other</option>
                    </select>

                    <!-- Base Model Filter -->
                    <select id="baseModelFilterLibrary" data-placeholder="Base Model(s)" multiple data-library-multi-select>
                        <option value="SD 1.4">SD 1.4</option>
                        <option value="SD 1.5">SD 1.5</option>
                        <option value="SD 2.0">SD 2.0</option>
                        <option value="SD 2.0 768">SD 2.0 768</option>
                        <option value="SD 2.1">SD 2.1</option>
                        <option value="SD 2.1 768">SD 2.1 768</option>
                        <option value="SD 2.1 Unclip">SD 2.1 Unclip</option>
                        <option value="SDXL 0.9">SDXL 0.9</option>
                        <option value="SDXL 1.0">SDXL 1.0</option>
                        <option value="Other">Other</option>
                    </select>

                    <!-- Sort Option -->
                    <select id="sortOptionLibrary" onchange="assets_downloader.searchInLibrary()">
                        <option value="">Sort By</option>
                        <option value="az">A-z</option>
                        <option value="za">Z-a</option>
                        <option value="Newest">Newest</option>
                    </select>
                </div>
            </div>
        </div>
        <div id="library-container"></div>
    </div>
</div>